<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue响应式原理</title>
    <script src="./Dep.js"></script>
    <script src="./Watcher.js"></script>
    <script src="./Observer.js"></script>
    <script src="./Compile.js"></script>
    <script src="./FVue.js"></script>
</head>

<body>
    <div id="app">
        <h2>{{obj.name}}---{{obj.age}}</h2>
        <h2>{{obj.age}}</h2>
        <h3 v-text = 'obj.age'></h3>
        <h4 v-html = 'msg'></h4>
        <ul>
            <li>1</li>
            <li>2</li>
        </ul>
        <input v-model="msg">
        <button v-on:click = 'handler1'>按钮v-on</button>
        <button @click = 'handler2'>按钮@</button>
    </div>
 
    <script>
        const vm = new FVue({
            el: '#app',
            data: {
                obj: {
                    name: 'dragon',
                    age: 18
                },
                msg: '响应式'
            },
            methods:{
                handler1 () {
                    alert(1)
                },
                handler2 () {
                    alert(2)
                }
            }
        })
      

    </script>
</body>

</html>
